<template>
	<view class="container">
		<view class="cont_box">
			<view class="video">
				<view class="title">
					上传图片素材
				</view>
				<view class="desc">
					最大显示2MB
				</view>
				<!-- 上传视频 -->
				<view class="upload" v-if='!imageurl'>
					<view class="iconfont icon-shangchuan">
					</view>
					<view class="upload_title">
						点击图片上传至此处
					</view>
					<view class="upload_but" @click="uploadvodeo(1)">
						选择图片
					</view>
				</view>
				<!-- 图片展示 -->
				<view class="videoitem" v-else>
					<image :src="imageurl" mode='scaleToFill'></image>
					<view class="delvideo" @click="delimageurl">
						×
					</view>
				</view>
			</view>
			<view class="timbre">
				<view class="timbre_title">
					<view class="title">
						选择音色
					</view>
					<view class="subsection">
						<u-subsection inactiveColor='#595959' activeColor='#f97316' :list="timbrelist"
							:current="timbrevalue" @change="timbreChange"></u-subsection>
					</view>

				</view>
				<!--系统音色 -->
				<view class="system_tone" v-if="timbrevalue==0">
					<view class="system_tone_item" :class="activesystem==index? 'system_tone_item_active':''"
						v-for="(item,index) in systemlist" :key="index" @click='activesystemfn(index,item.timbreUrl)'>
						<view class="system_tone_item_">
							<view class="system_tone_item_title">
								{{item.timbreName}}
							</view>
							<view class="">
								<span v-if="activesystem==index" class="iconfont icon-duihao2"></span>
								<span v-else class="iconfont icon-weixuanzhongyuanquan"></span>
							</view>
						</view>
						<view class="desc">
							{{item.timbreContext}}
						</view>
					</view>
				</view>
				<!-- 上传音色 -->

				<view v-else>
					<view class="upload" v-if="(activesystem ==-1 && !speechobj.tempFilePath)|| activesystem !=-1">
						<view class="iconfont icon-shangchuan">

						</view>
						<view class="upload_title">
							点击上传音色按钮进行音色录制
						</view>
						<view class="upload_but" @click="show=true">
							上传音色
						</view>
					</view>
					<view class="" style="padding: 10px 0; display: flex; justify-content: center;" v-else>
						<view class="speech" @click="playVoice(speechobj.tempFilePath)">
							<view class="speech_">
								<view class="iconfont icon-shengboyuyinxiaoxi">
								</view>
								<view class="speech_item">
									{{durationfn(speechobj.duration)?durationfn(speechobj.duration):'未知'}}″
								</view>
							</view>
							<view class="iconfont" :class="endtype? 'icon-bofang' :'icon-bofang2'">

							</view>
						</view>
					</view>
					<view class="customize" @click="customvoice">
						<view class="iconfont icon-yinle">

						</view>
						<view class="title">
							<view class="">
								我的自定义音色
							</view>
							<view class="desc customize_desc">
								自定义上传的音频文件
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="video">
				<view class="title">
					上传图片背景
				</view>
				<view class="desc">
					最大显示2MB
				</view>
				<!-- 上传图片背景 -->
				<view class="upload" v-if='!backUrl'>
					<view class="iconfont icon-shangchuan">
					</view>
					<view class="upload_title">
						点击图片上传至此处
					</view>
					<view class="upload_but " @click="uploadvodeo(2)">
						选择图片
					</view>
				</view>
				<!-- 图片背景展示展示 -->
				<view class="videoitem" v-else>
					<image :src="backUrl" mode='scaleToFill'></image>
					<view class="delvideo" @click="delbackUrl">
						×
					</view>
				</view>
				<!--  -->
				<view class="" v-show="backUrl">
					<view class="title" style="margin-bottom: 10px;">
						效果展示
					</view>
					<view class="desc" style="color: #ff585b;">
						请等待图片合成成功之后，再进行视频生成
					</view>
					<!-- 图片背景展示展示 -->
					<view class="videoitem">
						<u--image :src="synthesisurl" width='100%' height='150px' mode='scaleToFill'>
							<template v-slot:loading>
								<u-loading-icon color="red"></u-loading-icon>
								<span style="font-size: 28rpx;">合成中,请稍后</span>
							</template>
						</u--image>
					</view>
				</view>
			</view>

			<view class="timbre text">
				<view class="timbre_title">
					<view class="title">
						文本输入
					</view>
					<view class="subsection">
						<u-subsection inactiveColor='#595959' activeColor='#f97316' :list="textlist"
							:current="textvalue" @change="textChange"></u-subsection>
					</view>
				</view>
				<view class="desc" v-if="textvalue==0">
					请输入需要转换为语音的文本
				</view>
				<!--自定义文本 -->
				<view class="" v-if="textvalue==0">
					<u--textarea v-model="context" maxlength='500' border='surround' height='100' placeholder="请输入内容"
						count></u--textarea>
				</view>
				<!-- AI生成 -->
				<view class="" v-else>
					<view class="ai_chat" v-if="historyData.length>0">
						<scroll-view scroll-y="true" class="scroll-Y scroll_list" :style="{ height: 'calc(400px)' }"
							:scroll-top="scrollTop">
							<view class="list_item" v-for="item in historyData" :key="item.id">
								<!-- 问题和头像，头像在右边 -->
								<view class="question">
									<view class="text">
										{{item.question}}
									</view>
									<view class="avatar-right iconfont icon-wode1">

									</view>
								</view>

								<!-- 回答和头像，头像在左边 -->
								<view class="answer">
									<view class="avatar-left iconfont icon-jiqiren">
										<!-- <image class="avatar" src="answer-avatar.jpg" /> -->
									</view>
									<view class="text" v-if="item.answers || !lodding">
										<zero-markdown-view :markdown="item.answers"></zero-markdown-view>
									</view>
									<view class="text textframes" v-else>
										|
									</view>
								</view>

								<view class="answer_but" @click="quote(item.answers)" v-if="item.answers || !lodding">
									<span class="iconfont icon-yinyong">

									</span>引用
								</view>
							</view>

						</scroll-view>
					</view>
					<view class="ai_item">
						<view class="item_input">
							<u--textarea v-model="textarea" autoHeight placeholder="请输入问题内容"></u--textarea>
						</view>
						<view class="itme_but" @click="handleSend">
							发送
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="timbre footer">
			<view class="prompt">
				<view class="iconfont  icon-shibai-xianxing">

				</view>
				<view class="prompt_detail">
					<view class="prompt_title">
						视频生成信息
					</view>
					<view class="prompt_time desc">
						预计生成时间 {{estimatedTime?estimatedTime:''}}
					</view>
					<view class="desc">
						当前队列{{queuenum}}个任务，您的任务预计排在第{{queuenum+1}}位
					</view>
				</view>
			</view>
			<view class="but">
				<view class="cancel _but" @click="cancel">
					取消
				</view>
				<view class="submit _but" @click="submit">
					确认
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" round='15' :closeable='true' @close="show=false">
			<view class="popup">
				<view class="popup_">
					<view class="popup_item">
						按住下方按钮，匀速读出下方文字
					</view>
					<view class="popup_item_title">
						今年去旅行，乘坐最快的火车，穿过了许多桥梁与隧道。天空蔚蓝，景色美极了，我用手机拍下了所有美好的瞬间，心情非常愉悦。
					</view>
				</view>
				<view class="loader" v-if="shwotip">
					<span class="bar"></span>
					<span class="bar"></span>
					<span class="bar"></span>
				</view>
				<view class="speech" v-if="!shwotip && speechobj.tempFilePath"
					@click="playVoice(speechobj.tempFilePath)">
					<view class="speech_">
						<view class="iconfont icon-shengboyuyinxiaoxi">

						</view>
						<view class="speech_item">
							
							{{durationfn(speechobj.duration)}}″
						</view>
					</view>
					<view class="iconfont" :class="endtype? 'icon-bofang' :'icon-bofang2'">

					</view>
				</view>
				<view class="popup_ popup_flex">
					<view class="" style="text-align: center;">
						<view class="popup_item_but_desc">
							按住说话
						</view>
						<view class="iconfont icon-maikefeng" @touchstart="onTouchStart" @touchend="onTouchEnd"
							:class="shwotip ? 'active':''">
						</view>
					</view>
					<view class="iconfont icon-duihao" @click="submitaudio" v-if="speechobj.tempFilePath">
					</view>
				</view>
			</view>
		</u-popup>
		<!-- </view> -->

		<helang-compress ref="helangCompressa"></helang-compress>
		<u-modal :show="audioshow" confirmColor='#f97316;' @confirm='confirmaudio' title="历史音色">
			<view class="slot-content" style="width:calc(100% - 20px);">
				<scroll-view scroll-y="true" class="scroll-Y scroll_list" :style="{ height: 'calc(400px)' }">
					<u-radio-group v-model="radiovalue" placement="column" >
						<view class="" v-for="(item, index) in audiolist" :key="index">

							<view class="audio-list-item">
								<u-radio activeColor='#f97316' :name="index">
								</u-radio>
								<view class="">
									<view class="audio-speech" @click="playVoice(item.timbreUrl,index)">
										<view class="speech_">
											<view class="iconfont icon-shengboyuyinxiaoxi">
											</view>
										</view>
										<view class="iconfont audio-play-icon"
											:class="item.endtype? 'icon-bofang' :'icon-bofang2'">
										</view>
									</view>
									<view class="audio-time">
										上传时间：{{item.insertTime}}
									</view>
								</view>
							</view>
						</view>

					</u-radio-group>

				</scroll-view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import helangCompress from '../../components/helang-compress/helang-compress.vue';
	import {
		getCategoryName
	}
	from '../../utils/utils.js'
	var plugin = requirePlugin("WechatSI")
	let recorderManager = plugin.getRecordRecognitionManager()
	// let recorderManager = uni.getRecorderManager();
	let innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				radiovalue: '',//历史音色单选框
				audioshow: false,//历史音色弹窗
				audiolist: [],//历史音色集合
				lodding: false,
				endtype: true,
				show: false,
				timbrelist: ['系统音色', '自定义音色'],
				textlist: ['手动输入', 'AI生成'],
				systemlist: [

					// {
					// 	name: '标准女生',
					// 	desc: ''
					// },
					// {
					// 	name: '沉稳男生',
					// 	desc: '成熟稳重适合故事讲述'
					// },
					// {
					// 	name: '甜美童声',
					// 	desc: '活泼可爱，适合儿童内容'
					// },
					// {
					// 	name: '情感主播',
					// 	desc: '富有感染力，适合故事讲述'
					// },

				],
				auduourl: '', //当前选择音色的地址
				imageurl: '', //当前上传的图片url
				backUrl: "", //当前上传的图片背景
				synthesisurl: '', //合成后的图片
				timbreType: '', //1系统音色2//自定义音色
				context: '', //视频文本
				activesystem: -1,
				timbrevalue: 0,
				textvalue: 0,
				queuenum: 0, //当前队列数
				innerAudioContext: null,
				voicePath: '',
				shwotip: false,
				speechobj: {
					tempFilePath: ''
				},
				query: {
					pageNum: 1,
					pageSize: 10,
				},


				textarea: '',
				historyData: [], // 对话记录数据
				historyarr: [], // 用于API请求的消息历史
				scrollTop: 0 // 滚动位置

			};
		},
		components: {
			helangCompress
		},
		onload() {

		},
		mounted() {
			this.gettimbresfn()
			this.generateNum()
		},
		computed: {

			estimatedTime() {
				// 获取字数
				const wordCount = this.context.length;

				// 确保最低时间为20秒
				let timeInSeconds;

				// 根据字数计算时间
				if (wordCount <= 18) {
					timeInSeconds = 20;
				} else if (wordCount <= 100) {
					timeInSeconds = (wordCount - 18) * 0.55 + 20; // 线性增长
				} else if (wordCount <= 200) {
					timeInSeconds = (wordCount - 18) * 0.7 + 50; // 稍快增长
				} else if (wordCount <= 300) {
					timeInSeconds = (wordCount - 18) * 0.8 + 100; // 增速加快
				} else {
					timeInSeconds = (wordCount - 18) * 1 + 120; // 超过300字后时间快速增长
				}

				// 确保时间不低于20秒
				timeInSeconds = Math.max(timeInSeconds, 20);

				// 计算分钟和秒数
				let minutes = Math.floor(timeInSeconds / 60);
				let seconds = Math.round(timeInSeconds % 60);

				return `${minutes} 分 ${seconds} 秒`;
			},
		},
		watch: {

		},
		methods: {
			
			confirmaudio() {
				this.audioshow = false
				if(this.radiovalue>=0){
					this.timbreType = 2
					this.speechobj.tempFilePath = this.audiolist[this.radiovalue]
					this.auduourl = this.audiolist[this.radiovalue]
					this.activesystem = -1
					this.radiovalue=''
				}
			},
			customvoice() {
				this.audioshow = true
				this.$request(`/video/cusTimbrePage`, 'post', this.query).then(
					res => {
						const arr = res.data.data.records.map(item => {
							return {
								...item,
								endtype: true
							}
						})
						this.audiolist = this.audiolist.concat(arr)
					})
			},
			delimageurl() {
				this.imageurl = ''
				this.backUrl = ''
				this.synthesisurl = ''
			},
			delbackUrl() {
				this.backUrl = ''
				this.synthesisurl = ''
			},
			quote(e) {
				const text = e
					.replace(/\*\*(.*?)\*\*/g, '$1')
					.replace(/^\s*###\s*/gm, '') // 新增：去除###标记
					.replace(/^\s*[-*•]\s+/gm, '')
					.replace(/^\s*\d+\.\s+/gm, '')
					.replace(/^\s+|\s+$/gm, '');
				this.context = text
				this.textvalue = 0
			},
			// 发送消息
			async handleSend() {
				if (!this.textarea.trim()) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
					return;
				}
				if (this.lodding) {
					uni.showToast({
						title: '正在问答中...',
						icon: 'none'
					});
					return;
				}
				try {
					// uni.showLoading({
					// 	title: "加载中...",
					// 	mask: true
					// });
					this.lodding = true
					await this.fetchfn();
				} catch (error) {
					console.error('发送失败:', error);
					uni.hideLoading();
				} finally {
					// this.isLoading = false;
				}
			},

			// 主要的请求函数 - 使用 wx.request 替代 fetch
			fetchfn() {
				const that = this
				return new Promise((resolve, reject) => {
					// 判断输入框为空的话不进行请求
					if (!this.textarea) {
						reject(new Error('输入内容为空'));
						return;
					}

					const queryobj = {
						role: 'user',
						content: this.textarea,
					}
					// 定义空白对话数据
					let objitem = {
						id: this.historyData.length > 0 ? this.historyData[this.historyData.length - 1].id +
							1 : this.historyData.length + 1,
						question: this.textarea.trim(),
						answers: '',
						startshow: true,
						ref: 'refmath' + (this.historyData.length > 0 ? this.historyData[this.historyData
							.length - 1].id + 1 : this.historyData.length + 1)
					}


					// 向记录中添加
					this.historyData.push(objitem);
					this.historyarr.push(queryobj);
					this.textarea = '';
					// 滚动到底部
					this.$nextTick(() => {
						this.scrollToBottom();
					});
					uni.request({
						url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': 'Bearer sk-e4422c9471774e5397ea6ea83fa3f0d9'
						},
						data: {
							model: "deepseek-r1-distill-qwen-14b",
							messages: this.historyarr,
							stream: false // 改为非流式
						},
						success: (res) => {
							// uni.hideLoading();
							that.lodding = false
							console.log(res.data.choices[0].message.content);
							that.historyData[that.historyData.length - 1].answers = res.data.choices[0]
								.message.content
							// this.handleNonStreamResponse(res);
							resolve();
						},
						fail: (err) => {
							console.error('请求失败', err);
							this.handleRequestError();
							reject(err);
						}
					});
				});
			},

			// 滚动到底部
			scrollToBottom() {
				this.$nextTick(() => {
					// 使用随机值确保滚动到底部
					this.scrollTop = Math.random() * 100000;
				});
			},
			submitaudio() {
				const that = this
				that.$uploadimg(this.speechobj.tempFilePath, '/upload/timbre')
					.then((url) => {
						uni.showToast({
							title: '上传成功',
							icon: 'success',
						});
						that.timbreType = 2
						that.auduourl = url
						that.activesystem = -1
						that.show = false
					})
					.catch((err) => {
						console.error(err);
					});
			},
			playVoice(e, index) {
				if (this.innerAudioContext) {
					this.innerAudioContext.stop(); // 停止当前音频
					this.innerAudioContext.destroy(); // 销毁当前音频上下文（释放资源）
				}
				if (index >= 0) {
					this.audiolist.forEach((item, i) => {
						if (i != index) {
							item.endtype = true;
						} else {
							item.endtype = false
						}
					});
				} else {
					this.endtype = false
				}
				const that = this
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = e
				this.innerAudioContext.play();
				this.innerAudioContext.onEnded(function() {
					if (index >= 0) {
						that.audiolist.forEach((item, i) => {
							item.endtype = true;
						});
					} else {
						that.endtype = true
					}
				});
			},
			durationfn(ms) {
				if (!ms) {
					return ''
				}
				// 将毫秒转换为秒
				let seconds = Math.floor(ms / 1000);

				// 计算分钟和剩余的秒数
				let minutes = Math.floor(seconds / 60);
				let remainingSeconds = seconds % 60;

				// 格式化输出 MM:SS
				// return `${minutes}:${remainingSeconds < 10 ? '0' + remainingSeconds : remainingSeconds}`;
				return remainingSeconds;

			},
			// 开始录音
			onTouchStart() {
				// 手指按下时的逻辑操作
				this.shwotip = true
				recorderManager.start({
					format: 'mp3',
					duration: 60000,
					lang: 'zh_CN' // 中文
				});
				uni.vibrateLong({
					success: function() {
						console.log('success');
					}
				});
			},
			// 去除标点符号并比较
			removePunctuation(str) {
				// 使用正则表达式去除所有标点符号
				return str.replace(/[\p{P}\p{S}]/gu, '').trim();
			},
			// 录音结束执行onstop回调
			onTouchEnd() {
				this.shwotip = false
				// 手指抬起时的逻辑操作
				const that = this
				recorderManager.stop();
				console.log('手指抬起');
				// 识别结束
				recorderManager.onStop = (res) => {
					console.log('识别结束', res);
					// 去除标点符号后的句子
					const cleanedSentence1 = that.removePunctuation('今年去旅行，乘坐最快的火车，穿过了许多桥梁与隧道。天空蔚蓝，景色美极了，我用手机拍下了所有美好的瞬间，心情非常愉悦。');
					const cleanedSentence2 = that.removePunctuation(res.result);
					if (cleanedSentence1 == cleanedSentence2) {
						that.speechobj = res

					} else {
						uni.showModal({
							title: '提示',
							content: '语音识别失败，请使用标准普通话匀速读出语音文字',
							showCancel: false,
							success: function(res) {
								return
							}
						});
						return
					}
				};
				recorderManager.onError = (res) => {
					console.log('错误', res);
					uni.showModal({
						title: '识别失败',
						content: getCategoryName(res.retcode),
						showCancel: false,
						success: function(res) {
							return
						}
					});

				};

				// recorderManager.onStop(function(res) {
				// 	console.log(res);
				// 	that.speechobj = res
				// });
				// console.log(recorderManager);

			},
			generateNum() {
				this.$request(`/video/getGenerateNum`, 'get').then(
					res => {
						this.queuenum = res.data.data
						console.log(res);
					})
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			urlsynthesisfn() {
				const that = this
				const data = {
					originImg: this.imageurl,
					backGroundImg: this.backUrl,
				}
				this.$request(`/video/combineImage`, 'post', data).then(
					res => {
						console.log(res);
						that.$refs.helangCompressa.compress({
							src: res.data.data,
							maxSize: 800,
							fileType: 'jpg',
							quality: 0.85,
							minSize: -1 //最小压缩尺寸，图片尺寸小于该时值不压缩，非H5平台有效。若需要忽略该设置，可设置为一个极小的值，比如负数。
						}).then((obj) => {
							console.log(obj);
							that.$uploadimg(obj, '/upload/image')
								.then((url) => {
									that.synthesisurl = url
								})
								.catch((err) => {
									that.synthesisurl = obj
								});

						})

					})


			},
			submit() {
				
				// return 
				const that = this
				if (!that.context) {
					uni.showToast({
						title: '请输入文字',
						icon: 'error',
					});
					return
				}
				if (!that.imageurl) {
					uni.showToast({
						title: '请上传人物图像',
						icon: 'error',
					});
					return
				}
				if (!that.auduourl) {
					uni.showToast({
						title: '音色不能为空',
						icon: 'error',
					});
					return
				}
				if (that.imageurl && that.backUrl && !that.synthesisurl) {
					uni.showToast({
						title: '图片合成请稍后',
						icon: 'error',
					});
					return
				}
				// 单张压缩
				const data = {
					taskType: 1,
					timbreType: that.timbreType,
					// timbreType: 2,
					timbreUrl: that.auduourl,
					// timbreUrl: 'https://ivu06wjqra.dy.takin.cc/human/video/timbre/e5d2f627739146c49f162e8c09f1bcf5.mp3',
					backUrl: that.synthesisurl,
					imageUrl: that.imageurl,
					context: that.context
				}
				// console.log(1111);
				// console.log(data);
				// return
				that.$request(`/video/addTask`, 'post', data).then(
					res => {
						if (res.data.data) {
							uni.showModal({
								title: '成功',
								content: '上传成功，请前往“我的视频” => “任务列表” 中查看生成进度',
								showCancel: false,
								success: function(res) {
									uni.reLaunch({
										url: '/pages/homepage/page_video?type=999' 
									});
								}
							});
						} else {
							uni.showModal({
								title: '失败',
								content: res.data.message,
								showCancel: false,
								success: function(res) {

								}
							});
						}

						// 压缩成功回调
					}).catch((err) => {
					// 压缩失败回调
				})

			},
			uploadvodeo(e) {
				if (e == 2 && !this.imageurl) {
					uni.showModal({
						title: '提示',
						content: '请先上传人像图片，在进行背景上传',
						showCancel: false,
						success: function(res) {
							return
						}
					});
					return
				}
				const that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sizeType: ['compressed'],
					success: (res) => {

						const mbsizee = 2 * 1024 * 1024
						if (res.tempFiles[0].size > mbsizee) {
							uni.showModal({
								title: '提示',
								content: '图片过大，请上传2MB以内的视频',
								showCancel: false,
								success: function(res) {
									return
								}
							});
							return
						}
						uni.showLoading({
							title: "上传中...",
							mask: true
						});
						that.$uploadimg(res.tempFiles[0].tempFilePath, '/upload/image')
							.then((url) => {
								uni.hideLoading();
								uni.showToast({
									title: '上传成功',
									icon: 'success',
								});
								if (e == 1) {
									that.imageurl = url
								} else {
									that.backUrl = url
									that.urlsynthesisfn()
								}
							})
							.catch((err) => {
								console.error(err);
							});
					}
				});
			},
			gettimbresfn() {
				this.$request(`/video/getTimbres`, 'get').then(
					res => {
						this.systemlist = res.data.data
						// this.auduourl = this.systemlist[0].timbreUrl
						console.log(res);
					})
			},
			timbreChange(index) {
				this.timbrevalue = index
			},
			textChange(index) {
				this.textvalue = index
			},
			activesystemfn(e, url) {
				// 如果需要停止当前播放的音频
				if (this.innerAudioContext) {
					this.innerAudioContext.stop(); // 停止当前音频
					this.innerAudioContext.destroy(); // 销毁当前音频上下文（释放资源）
				}
				this.activesystem = e
				this.timbreType = 1
				this.auduourl = url
				this.speechobj.tempFilePath=''
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = url
			},

			generateNum() {
				this.$request(`/video/getGenerateNum`, 'get').then(
					res => {
						this.queuenum = res.data.data
						console.log(res);
					})
			},
		}
	};
</script>

<style scoped lang="scss">
	::v-deep .u-textarea {
		padding-bottom: 20px !important;
		min-height: 100px;
	}

	::v-deep .u-subsection {
		background-color: #f9efe8 !important;
		padding: 5px 10px !important;
		width: 100% !important;
		border-radius: 30px !important;
	}

	::v-deep .u-subsection--button {
		height: 40px !important;
	}

	::v-deep .u-subsection__bar {
		height: 30px !important;
		border-radius: 30px !important;
		// width: 167px !important;
	}

	.container {
		padding: 15px;
		height: calc(100vh - 30px);
		overflow: auto;
		background-color: #f9fafb;

		.title {
			font-size: 32rpx;
			font-weight: 600;
		}

		.desc {
			font-size: 24rpx;
			color: #738093;
			margin: 10px 0;
		}

		.cont_box {
			.video {
				background-color: #fff;
				padding: 15px;
				border-radius: 10px;
				margin-bottom: 10px;

				.videoitem {
					width: 50%;
					position: relative;

					image {
						height: 150px;
						width: 100%;
					}

					.delvideo {
						position: absolute;
						top: 0px;
						right: 0px;
						background-color: #f94222;
						color: #fff;
						height: 20px;
						line-height: 20px;
						width: 20px;
						text-align: center;
					}
				}
			}

			.upload {
				margin: 16px 0;
				border: 2px dashed #e0e0e0;
				border-radius: 12px;
				padding: 20px 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #fafafa;
				transition: all 0.3s ease;
				min-height: 150px;

				.icon-shangchuan {
					color: #797979;
					font-size: 50rpx;
				}

				.upload_title {
					font-size: 28rpx;
					font-weight: 600;
					margin: 10px 0;
				}

				.upload_but {
					height: 35px;
					width: 90px;
					background-color: #f97316;
					line-height: 35px;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: 600;
					border-radius: 30px;
				}
			}

			.timbre {
				background-color: #fff;
				padding: 15px;
				border-radius: 10px;

				.timbre_title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.subsection {
						width: 50%;
					}
				}

				.system_tone {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.system_tone_item {
						width: calc(50% - 30px);
						padding: 10px;
						border: 1px solid #bababa;
						border-radius: 10px;
						margin-top: 10px;

						.system_tone_item_ {
							display: flex;
							justify-content: space-between;

							.system_tone_item_title {
								font-size: 30rpx;
								font-weight: 600;
							}

							.iconfont {
								font-size: 44rpx;
							}

							.icon-weixuanzhongyuanquan {
								color: #738093;
							}

							.icon-duihao2 {
								color: #f97316;
							}
						}
					}

					.system_tone_item_active {
						border: 2px solid #f97316;
					}
				}
			}

			.text {
				margin-top: 10px;

				::v-deep .u-textarea {
					border: 1px solid #cacaca;
					margin: 10px 0;
				}

				.ai_chat {
					background-color: #f9fafb;
					margin: 10px 0;
					border-radius: 5px;

					.scroll-list {
						display: flex;
						flex-direction: column-reverse;
						/* 逆序显示聊天记录 */
					}

					.list_item {
						display: flex;
						flex-direction: column;
						padding: 10px;
					}

					.question,
					.answer {
						display: flex;
						// align-items: center;
						// margin-bottom: 10px;
					}

					.textframes {
						font-family: 'Courier', monospace;
						/* 选择一个等宽字体，模拟光标 */
						display: inline-block;
						width: 10px;
						/* 设置宽度 */
						height: 20px;
						/* 设置高度 */
						background-color: black;
						/* 光标的颜色 */
						animation: blink 1s step-end infinite;
						/* 闪烁动画，1秒闪烁一次 */
					}

					@keyframes blink {
						50% {
							opacity: 0;
							/* 中间时，设置为透明，模拟光标消失 */
						}
					}

					.answer_but {
						margin-left: 50px;
						color: #0055ff;
						font-size: 28rpx;

						.icon-yinyong {
							margin-right: 5px;
							color: #0055ff;
							font-size: 30rpx;
						}
					}

					.question {
						justify-content: flex-end;
					}

					.avatar-right,
					.avatar-left {
						margin-top: 10px;
						width: 40px;
						height: 40px;
						// border-radius: 50%;
						// background-color: #000;
					}

					.iconfont {
						text-align: center;
						font-size: 40rpx;
						font-weight: 600;
						line-height: 40px;
						color: #fff;
						border-radius: 10px;
					}

					.avatar-right {
						background-color: #00c8c8;

						margin-left: 10px;
						// margin-left: auto;
						/* 将问题的头像推到右边 */
					}

					.avatar-left {
						margin-right: 10px;
						font-weight: 500;
						background-color: #00aa7f;
						// margin-right: auto;
						/* 将回答的头像推到左边 */
					}

					.text {
						max-width: 70%;
						padding: 10px;
						background-color: #fff;
						border-radius: 10px;
					}
				}

				.ai_item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item_input {
						width: calc(100% - 70px);

						::v-deep .u-textarea {
							padding-bottom: 0 !important;
							min-height: 40px;
						}
					}

					.itme_but {
						height: 40px;
						width: 60px;
						line-height: 40px;
						text-align: center;
						border-radius: 10px;
						color: #fff;
						background-color: #f97316;
					}
				}

			}



		}

		.footer {
			margin-top: 10px;
		}

		.prompt {
			display: flex;
			background-color: #fff3e0;
			padding: 16px;
			margin-top: 16px;
			border-radius: 12px;
			border-left: 4px solid #ff4081;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);

			.icon-shibai-xianxing {
				color: #ff4081;
				font-size: 32rpx;
				margin-top: 2px;
				margin-right: 10px;
				flex-shrink: 0;
			}

			.prompt_detail {
				flex: 1;
			}

			.prompt_title {
				font-size: 30rpx;
				font-weight: 600;
				color: #212121;
				margin-bottom: 4px;
			}
		}

		.but {
			display: flex;
			justify-content: space-around;
			margin-top: 20px;

			._but {
				width: 40%;
				height: 40px;

				line-height: 40px;
				text-align: center;
				border-radius: 30px;
			}

			.cancel {
				border: 1px solid #8d8d8d;
				color: #000;
			}

			.submit {

				background-color: #f97316;
				color: #fff;
			}
		}

		.customize {
			// margin-top: 10px;
			// background-color: #f9e6d6;
			// display: flex;
			// align-items: center;
			// padding: 10px;
			// border-radius: 10px;
			margin-top: 16px;
			background-color: #f9e6d6;
			display: flex;
			align-items: center;
			padding: 16px;
			border-radius: 12px;
			border-left: 4px solid #f97316;
			transition: all 0.3s ease;
			cursor: pointer;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: linear-gradient(135deg, transparent 0%, rgba(249, 115, 22, 0.05) 100%);
				transition: opacity 0.3s ease;
			}

			.icon-yinle {
				color: #f97316;
				font-size: 60rpx;
				margin-right: 16px;
				transition: transform 0.3s ease;
				position: relative;
				z-index: 1;
			}

			.title {
				flex: 1;
				position: relative;
				z-index: 1;

				>view {
					font-size: 34rpx;
					font-weight: 600;
					color: #212121;
					line-height: 1.4;
				}

				.customize_desc {
					margin-top: 4px;
					margin-bottom: 0;
					font-size: 28rpx;
					color: #757575;
					opacity: 0.9;
				}
			}
		}



		.popup {
			height: calc(70vh - 40px);
			padding: 20px 30px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;



			.loader {
				display: flex;
				align-items: center;
			}

			.bar {
				display: inline-block;
				width: 3px;
				height: 30px;
				background-color: rgba(31, 31, 31, 0.5);
				border-radius: 10px;
				animation: scale-up4 1s linear infinite;
			}

			.bar:nth-child(2) {
				height: 45px;
				margin: 0 5px;
				animation-delay: .25s;
			}

			.bar:nth-child(3) {
				animation-delay: .5s;
			}

			@keyframes scale-up4 {
				20% {
					background-color: #ffff;
					transform: scaleY(1.5);
				}

				40% {
					transform: scaleY(1);
				}
			}

			.popup_ {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.popup_flex {
				width: 100%;
				// flex-direction: row;
				position: relative;
			}

			.icon-duihao {
				right: 0;
				top: 45%;
				transform: translate(-50%);
				position: absolute;
				font-size: 100rpx;
				color: #00aa00;
			}

			.popup_item {
				font-size: 28rpx;
				margin-bottom: 20px;
			}

			.popup_item_title {
				font-size: 30rpx;
				font-weight: 600;
			}

			.popup_item_but_desc {
				font-size: 26rpx;
				margin-bottom: 10px;
			}

			.icon-maikefeng {
				color: #fff;
				font-size: 80rpx;
				padding: 20px;
				background-color: #f97316;
				border-radius: 50%;
			}

			.active {
				animation: pulse 0.6s ease-in-out infinite;
				/* 让按钮出现放大缩小的动画 */
			}

			/* 定义动画，按需调整放大缩小的比例 */
			@keyframes pulse {
				0% {
					transform: scale(1);
					/* 初始状态，正常大小 */
				}

				50% {
					transform: scale(1.2);
					/* 放大 1.2 倍 */
				}

				100% {
					transform: scale(1);
					/* 最终回到正常大小 */
				}
			}
		}

		.speech {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border: 1px solid #a7a7a7;
			padding: 10px;
			border-radius: 10px;
			width: 200px;

			.speech_ {
				display: flex;
				align-items: center;
			}

			.icon-shengboyuyinxiaoxi {
				font-size: 60rpx;
				margin-right: 10px;
			}

			.icon-bofang,
			.icon-bofang2 {
				font-size: 50rpx;
			}
		}

		/* 禁止手动调整文本框大小 */
		::-webkit-scrollbar {
			width: 0px;
			/* 滚动条的宽度 */
		}

		/* 音频列表项样式优化 */
		.audio-list-item {
			display: flex;
			margin: auto;
			width: 90%;
			background: #ffffff;
			border-radius: 12px;
			padding: 12px;
			margin-bottom: 12px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			transition: transform 0.2s ease, box-shadow 0.2s ease;
		}

		.audio-list-item:active {
			transform: translateY(1px);
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
		}

		/* 音频播放控制样式 */
		.audio-speech {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(135deg, #f9731615, #f9731630);
			border: 1px solid #f9731620;
			border-radius: 8px;
			padding: 8px 12px;
			width: 90%;
			min-height: 40px;
			cursor: pointer;
		}

		.audio-speech .speech_ {
			display: flex;
			align-items: center;
		}

		.audio-speech .icon-shengboyuyinxiaoxi {
			font-size: 56rpx;
			color: #f97316;
			margin-right: 8px;
		}

		.audio-play-icon {
			font-size: 48rpx;
			color: #666;
			transition: color 0.2s ease;
		}

		.audio-speech:active .audio-play-icon {
			color: #f97316;
		}

		/* 时间显示样式 */
		.audio-time {
			color: #888;
			font-size: 26rpx;
			margin-top: 6px;
			line-height: 1.2;
		}
	}
</style>